<template>
  <div class="bg">
    <el-row>
      <el-col :sm="{ span: 15, offset: 5 }" :xs="{ span: 24, offset: 0 }">
        <!-- 分类 -->
        <div class="tag-group">
          <span class="tag-group__title" style="font-weight: bold">分类：</span>
          <el-tag
            class="clickable"
            :type="metaActiveIndex === -1 ? 'success' : 'info'"
            style="margin-left: 10px"
            @click="metaSelect(0, -1)"
            >全部
          </el-tag>

          <el-tag
            class="clickable"
            v-for="(item, index) in metaObj"
            :key="item.mid"
            :type="metaActiveIndex === index ? 'success' : 'info'"
            style="margin-left: 10px"
            @click="metaSelect(item.mid, index)"
          >
            {{ item.name }}
          </el-tag>
        </div>
        <div class="tag-group2">
          <el-input size="small"
                    v-model="contentVo.content"
                    placeholder="搜索贴子"
                    style=" width: 250px"
                    prefix-icon="el-icon-search"
                    maxlength="10"
                    show-word-limit
                    clearable
                    @keyup.enter.native="search"
          />
          <el-select v-model="sortOrder" size="small" style="width: 10%" @change="onSortChange">
            <el-option
              v-for="item in sortOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button size="small"
                     icon="el-icon-search"
                     @click="dialogSearch = true"
          >搜索用户</el-button>
        </div>

        <!-- 消息盒子 -->
        <el-row v-for="(item, key) in contentObj" :key="key">
          <div class="xxbox">
            <!-- 头像，用户名 -->
            <div class="ty">
              <el-row :gutter="24">
                <el-col :sm="{ span: 2 }" :xs="{ span: 5, offset: 0 }"
                  ><el-avatar
                    class="ssss"
                    shape="square"
                    :size="50"
                    :src="item.param.uImage"
                  ></el-avatar
                ></el-col>
                <el-col :span="7"
                  ><div class="sub-title" @click="goToSpace(item.uid)">{{ item.param.uName }}</div></el-col
                >
                <el-col :span="11"
                  ><span class="time">{{ item.createTime }}</span></el-col
                >
              </el-row>

              <el-row :gutter="24">
                <el-col :sm="{ span: 2 }" :xs="{ span: 5, offset: 0 }"
                  ><div class="wwe"></div
                ></el-col>
                <el-col :sm="{ span: 22 }" :xs="{ span: 24, offset: 0 }">
                  <!-- 内容 -->
                  <p class="pre-wrap-text">{{ item.content }}</p>
                  <!-- 图片 -->
                  <div v-if="item.ctype === 1">
                    <el-row>
                      <div v-for="(sum, key) in item.pictureUrl" :key="key">
                        <el-col
                          :sm="{ span: 6, offset: 1 }"
                          :xs="{ span: 7, offset: 1 }"
                        >
                          <div>
                            <el-image
                              style="border-radius: 10px"
                              :style="imageStyle"
                              fit="true"
                              :src="sum"
                              :preview-src-list="item.pictureUrl"
                            >
                            </el-image>
                          </div>
                        </el-col>
                      </div>
                    </el-row>
                  </div>
                  <!-- 视频 -->
                  <div v-if="item.ctype === 2">
                    <el-col
                      :sm="{ span: 20, offset: 1 }"
                      :xs="{ span: 23, offset: 1 }"
                    >
                      <video
                        style="border-radius: 10px"
                        align="center"
                        :autoplay="false"
                        width="100%"
                        :height="videoStyle"
                        aspectRatio="7:4"
                        preload="auto"
                        muted
                        controls
                      >
                        <source :src="item.pictureUrl[0]" type="video/mp4" />
                        您的浏览器不支持视频标签！
                      </video>
                    </el-col>
                  </div>
                </el-col>
              </el-row>

              <!-- 点赞,评论 -->
              <div class="dz">
                <el-row :gutter="24">
                  <el-col :span="8">
                    <div
                      class="sz copy-btn"
                      data-clipboard-action="copy"
                      @click="copys($event, item.cid)"
                    >
                      <img
                        width="20"
                        height="20"
                        src="~assets/images/fenxiang.png"
                      />
                      分享链接
                    </div></el-col
                  >
                  <div @click="dz(item.cid)">
                    <el-col :span="8">
                      <img
                        width="20"
                        height="20"
                        v-if="item.param.uIsZan === false"
                        src="~assets/images/dz.png"
                      />
                      <img
                        width="20"
                        height="20"
                        v-if="item.param.uIsZan === true"
                        src="~assets/images/dz1.png"
                      />
                      <span class="sz">点赞：{{ item.param.cNums }}</span>
                    </el-col>
                  </div>

                  <el-col :span="8">
                    <div @click="pin(item.cid)">
                      <img
                        width="20"
                        height="20"
                        src="~assets/images/pinlun.png"
                      />
                      <span class="sz">评论：{{ item.param.cTotal }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-row>
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 搜索用户弹窗  -->
    <el-dialog title="请输入用户UID" :visible.sync="dialogSearch" width="30%">
      <el-input v-model="searchU.Content"
                show-word-limit
                maxlength="19"
                clearable
      ></el-input>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogSearch = false">取 消</el-button>
      <el-button type="primary" @click="searchUser(searchU.Content)" :disabled="searchU.Content.length === 0">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import touristApi from "@/api/tourist";
import Clipboard from "clipboard";
import cookie from "js-cookie";
import operateApi from "@/api/Operate";
import {Message} from "element-ui";
export default {
  data() {
    return {
      classObject: { active: true, sort: false },
      dialogSearch: false,
      tabPosition: "left",
      contentObj: [],
      metaActiveIndex: -1,
      contentVo: {
        page: 1,
        content: null,
        sortOrder: this.sortOrder,
      },
      metaObj: [],
      sortOrder: 'desc', // 默认排序顺序
      sortOptions: [
        { label: '倒序', value: 'desc' },
        { label: '正序', value: 'asc' },
      ],
      total: 0,
      currentPage: 1, //当前页
      imageStyle: "",
      videoStyle: "",
      searchU: {
        Content: "",
      },
    };
  },

  //创建的时候自动调用
  created() {},
  //创建后
  mounted() {
    this.getAllMetas();
    this.metaSelect(0, -1);
    this.contentVo.page = 1;
    this.contentVo.mid = 0;

    if (!sessionStorage.getItem('hasShownWelcome')) {
      if (this.$route.query.types === "cgs") {
        this.oppen(cookie.get("name"));
        sessionStorage.setItem('hasShownWelcome', 'true');
      }
    }

    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    if (width < 720) {
      this.imageStyle = "width: 100%; height: 100px;";
      this.videoStyle = height / 4 + "px;";
    } else {
      this.imageStyle = "width: 100%; height: " + width / 6 + "px;";
      this.videoStyle = height / 3 + "px;";
    }
  },
  components: {},
  methods: {
    // 登录成功
    oppen(value) {
      const h = this.$createElement;
      this.$notify({
        title: "WelCome",
        message: h("i", { style: "color: teal" }, "欢迎回来，" + value + "!"),
      });
    },
    //点赞
    dz(cid) {
      if (cookie.get("campus-token") === undefined) {
        this.$router.push({ path: "/userlogin", query: { id: "1" } });
      } else {
        operateApi.getUserIsZan(cid).then((response) => {
          const text = response.data;
          this.$message({
            showClose: true,
            message: text,
            type: "success",
          });
          this.getContent(this.contentVo);
        });
      }
    },
    //复制分享链接
    copys(e, cid) {
      const hostname = window.location.origin;
      const clipboard = new Clipboard(e.target, {
        text: () => hostname + "/function/comments?cid=" + cid,
      });
      clipboard.on("success", () => {
        const h = this.$createElement;
        this.$notify({
          title: "复制成功：",
          message: h("i", { style: "color: teal" }, "快去分享给好朋友吧!"),
        });
        // console.log("复制成功");
        // 释放内存
        clipboard.destroy();
      });

      clipboard.on("error", () => {
        // 不支持复制
        Message({
          message: "该浏览器不支持自动复制",
          type: "warning",
        });
        // 释放内存
        clipboard.destroy();
      });
    },
    //获取全部分类
    getAllMetas() {
      touristApi
        .getMetas()
        .then((response) => {
          this.metaObj = response.data;
        })
        .catch();
    },
    //当分类被选择
    metaSelect(mid, index) {
      this.metaActiveIndex = index;
      this.contentVo.mid = mid;
      this.getContent(this.contentVo);
    },
    //获取所有内容
    getContent(contentVo) {
      touristApi
        .getContent(contentVo)
        .then((response) => {
          this.contentObj = response.data.records;
          this.total = response.data.total;
        })
        .catch(() => {});
    },
    //当页数改变的时候
    handleCurrentChange(val) {
      this.contentVo.page = val;
      this.getContent(this.contentVo);
    },
    pin(value) {
      this.$router.push({ path: '/function/comments', query: { cid: value } });
    },
    search(){
      this.contentVo.page = 1;
      this.getContent(this.contentVo);
    },
    searchUser(value){
      if (/^\d+$/.test(value)) {
        this.$router.push({path: '/function/space?uid=' + value});
      }else{
        this.$message.error('UID必须是纯数字');
      }
    },
    onSortChange(value) {
      this.contentVo.sortOrder = value; // 更新排序方式
      this.search(); // 根据新的排序重新搜索
    },
    goToSpace(value) {
      // 使用 Vue Router 进行跳转
      this.$router.push({ path: '/function/space?uid=' + value });
    },
  },
};
</script>

<style scoped>
.bg {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgb(0 0 0 / 10%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.xxbox {
  margin: 15px 15px 30px 15px;
  /* box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.2); */
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 25px rgb(0 0 0 / 10%);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 10px;
}
.ty {
  border-radius: 10px;
  padding: 6px;
}
.sub-title {
  padding-top: 20px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.time {
  padding-top: 20px;
  float: right;
  font-size: 12px;
  color: darkgrey;
}

.sz {
  font-weight: bolder;
  cursor: pointer;
  font-size: 10px;
  color: rgb(110, 110, 110);
}

.tag-group {
  text-align: center;
}
.tag-group2{
  text-align: center;
  margin-top: 10px;
}
.fenye {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.dz {
  text-align: center;
  margin: 5px;
}
.clickable {
  margin-top: 5px;
  cursor: pointer;
}

.ssss {
  margin: 5px 0 0 5px;
}
.wwe {
  height: 10px;
}
.pre-wrap-text {
  white-space: pre-wrap; /* 保持空白符序列，但是正常地进行换行 */
}
</style>
